<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>矩阵点击</title>
    <style>
      * {
        box-sizing: border-box;
      }

      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid #ccc;
        width: 50px;
        height: 50px;
      }

      .current {
        background-color: red;
      }

      .currentAround {
        background-color: skyblue;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    <script>
      const table = document.querySelector('table')
      const tds = document.querySelectorAll('td')
      table.addEventListener('click', function () {
        const currentTd = event.target
        if (currentTd.localName == 'td') {
          //排他
          tds.forEach(td => (td.className = ''))
          //利己
          currentTd.className = 'current'
          //当前点击位置前一个单元格
          const prev = currentTd.previousElementSibling
          if (prev != null) {
            prev.className = 'currentAround'
          }
          //当前点击位置后一个单元格
          const next = currentTd.nextElementSibling
          if (next != null) {
            next.className = 'currentAround'
          }
          //当前点击位置上一行
          const prevTr = currentTd.parentNode.previousElementSibling
          if (prevTr != null) {
            const prevCurrent = prevTr.cells[currentTd.cellIndex]
            prevCurrent.className = 'currentAround'
            const prevTd = prevCurrent.previousElementSibling
            if (prevTd != null) {
              prevTd.className = 'currentAround'
            }
            const nextTd = prevCurrent.nextElementSibling
            if (nextTd != null) {
              nextTd.className = 'currentAround'
            }
          }

          //当前点击位置下一行
          const nextTr = currentTd.parentNode.nextElementSibling
          if (nextTr != null) {
            const nextCurrent = nextTr.cells[currentTd.cellIndex]
            nextCurrent.className = 'currentAround'
            const prevTd = nextCurrent.previousElementSibling
            if (prevTd != null) {
              prevTd.className = 'currentAround'
            }
            const nextTd = nextCurrent.nextElementSibling
            if (nextTd != null) {
              nextTd.className = 'currentAround'
            }
          }
        }
      })
    </script>
  </body>
</html>
